<template>

    <div class="small">

        <el-input  placeholder="标题" clearable></el-input>
        <button @click="fillData()">{{$t('message.title')}}</button>
        <canvas class= "linecontent" id="myChart2" width="400px" height="400px"></canvas>
    </div>
</template>
<script>

import Chart from 'chart.js'
export default {
    components: {

    },
    data () {
        return {
            data: [65, 59, 0, 81, 56, 10, 40, 22, 32, 54, 10, 30]
        }
    },
    mounted () {
        this.drawChart()
        // drawChart(){}
    },
    methods: {
        fillData () {
            this.$http.get(
            `${window.SITE_CONFIG['baseURL']}/demo/charts2/list`,
            {
                mode: 'no-cors',
                headers: {
                'Access-Control-Allow-Origin': '*',
                'Content-Type': 'application/json'
                },
                withCredentials: true,
                params: {
                'spName': 'SP_EMS_Electricity',
                'spParams': '2017-08-20,2017-08-28'
                }
            }
            ).then(({data}) => {
                console.log(data)
            })
        },

        drawChart () {
            var ctx2 = document.getElementById('myChart2')
            /* eslint-disable no-new */
            new Chart(ctx2, {
                type: 'bar',
                data: {
                    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
                    datasets: [
                        {
                            label: 'test1',
                            backgroundColor: 'rgba(225,10,10,0.3)',
                            borderColor: 'rgba(225,103,110,1)',
                            borderWidth: 1,
                            pointStrokeColor: '#fff',
                            pointStyle: 'crossRot',
                            data: this.data,
                            cubicInterpolationMode: 'monotone',
                            spanGaps: true,
                            fill: true
                        }
                    ]
                },
                options: {
                }
            })
        }

    }
}
</script>
<style>
.small {
    width: 600px;
    height: 400px;
}
</style>
